<template>
  <div class="all-task">
    <statistics-card :card-list="reactiveData.allTaskCardList"></statistics-card>
    <div class="table-div">
      <div class="search-tool">
        <div class="text-name">
          <div class="name">任务名称 :</div>
          <el-input v-model="name" placeholder="请输入" @keydown.enter.native="getData" clearable></el-input>
        </div>
        <el-select v-model="taskUse" placeholder="请选择任务用途" clearable>
          <el-option v-for="item in  reactiveData.taskUseList" :key="item.name" :label="item.name" :value="item.name" />
        </el-select>
        <el-date-picker v-model="reactiveData.arrTime" type="datetimerange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss" />
        <el-button type="primary" @click="getData" style="margin-left:2rem;">查询</el-button>
        <el-button @click="reset">重置</el-button>
        <el-button type="danger" @click="deleteTable" :disabled="reactiveData.tableIds.length === 0">删除</el-button>
        <el-button type="success" @click="handleInfo('')">新增</el-button>

      </div>
      <div class="table-content">
        <el-table :data="reactiveData.tableData" stripe :header-cell-style="{
          'font-size': '1rem',
          'height':'3rem',
          'background': '#E5EBF3 !important',
          'color': '#333333',
        }" @selection-change="handleSelectionChange" height="470">
          <el-table-column type="selection" width="55" />
          <el-table-column label="任务名称">
            <template #default="scope">
              <div style="display: flex; align-items: center;">
                <div style="margin-right: 1rem;width: 4rem;">
                  <img v-if="scope.row.taskUse.includes('火情')" src="@/assets/image/table/ic_linhuo.png">
                  <img v-if="scope.row.taskUse.includes('河道')" src="@/assets/image/table/ic_hedao.png">
                  <img v-if="scope.row.taskUse.includes('禁牧')" src="@/assets/image/table/ic_jinmu.png">
                  <img v-if="scope.row.taskUse.includes('积水点')" src="@/assets/image/table/ic_neilao.png">
                </div>
                <div>
                  <h6>{{ scope.row.name }}</h6>
                  <span>{{scope.row.createHumanName}}</span>
                  <span style="border-right:1px solid #ccc;margin:0 10px;"></span>
                  <span>{{scope.row.industryName}}</span>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="测区名称">
            <template #default="scope">
              <div v-if="scope.row.patrolsnRegionName">
                <el-tag v-for="(item,index) in scope.row.patrolsnRegionName.split(',')" :key="index" effect="plain" type="info" style="margin-right:5px">{{item}}</el-tag>
              </div>
              <div v-else>
                <el-tag type="info">无</el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="isCircle" label="是否为周期任务" :formatter="formatterCircle" />
          <el-table-column label="预计执行时间" width="400">
            <template #default="scope">
              {{scope.row.startTime}} - {{ scope.row.endTime }}
            </template>
          </el-table-column>
          <el-table-column label="任务状态">
            <template #default="scope">
              <img :src="getImage(`table/${scope.row.statusName}.png`)">
            </template>
          </el-table-column>
          <el-table-column width="250" label="操作">
            <template #default="scope">
              <div style="display: flex; align-items: center;">
                <el-button @click="handleInfo(scope.row.id)" type="primary">修改任务</el-button>
                <el-button @click="handlePlan(scope.row.id)" type="primary">编制方案</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="right-bottom">
          <el-pagination layout="total, prev, pager, next," :pager-count="5" :total="total" @current-change="handleCurrentChange" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang=ts>
import { ElMessage, ElMessageBox } from "element-plus";
import statisticsCard from "@/views/viewComponent/statisticsCard.vue";
import {
  findallype,
  getUavTaskPageList,
  taskStatusStat,
  delTaskByIds,
} from "@/api/task";
import { getImage } from "@/utils/util";

import { ref, reactive } from "vue";
import { useRouter } from "vue-router";

interface statusTypeInerface {
  name: string;
  value: string;
}

interface taskStatusStatInterface {
  typeCode: string;
  creater?: string;
}

const statusType: Array<statusTypeInerface> = reactive([
  {
    name: "是",
    value: "1",
  },
  {
    name: "否",
    value: "0",
  },
]);

//会变的reactive变量
let reactiveData: any = reactive({
  taskUseList: [],
  tableData: [],
  arrTime: [],
  allTaskCardList: [],
  tableIds: [],
});

//任务名称
let name = ref("");
//状态
let statusName = ref("");
//任务用途
let taskUse = ref("");
//是否周期任务
let isCircle = ref("");
//列表集合的数量
let total = ref(0);
//分页
const pageSize = ref(10);
let pageIndex = ref(1);

const router = useRouter();

const handleInfo = (id: string = "") => {
  router.push({
    path: "/home/task/patrolInspectionInfo",
    query: {
      id,
    },
  });
};

const getStatisticsData = async (data: taskStatusStatInterface) => {
  const res: any = await taskStatusStat(data);
  if (res.statusCode === 200) {
    reactiveData.allTaskCardList = [];
    res.data.forEach((item: any) => {
      let obj: object = {};
      switch (item.status_name) {
        case "所有任务":
          obj = {
            name: "所有任务",
            imgName: "全部任务",
            value: item.num,
            color: "#4C94FE",
          };
          break;
        case "已完成":
          obj = {
            name: "已完成任务",
            imgName: "已完成",
            value: item.num,
            color: "#30C68A",
          };
          break;
        case "待执行":
          obj = {
            name: "待执行任务",
            imgName: "待执行任务",
            value: item.num,
            color: "#F0700F",
          };
          break;
        case "进行中":
          obj = {
            name: "进行中任务",
            imgName: "进行中",
            value: item.num,
            color: "#6962FE",
          };
          break;
      }

      reactiveData.allTaskCardList.push(obj);
    });
  } else {
  }
};

const getTaskUseList = async (data: any) => {
  const res: any = await findallype(data);
  if (res.statusCode === 200) {
    reactiveData.taskUseList = res.data;
  } else {
    reactiveData.taskUseList = [];
  }
};

const reset = () => {
  name.value = "";
  statusName.value = "";
  taskUse.value = "";
  isCircle.value = "";
  reactiveData.arrTime = [];
  getData();
};

const deleteTable = async () => {
  const isCofirm = await ElMessageBox.confirm("确定删除选中的数据吗?", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  });
  if (isCofirm) {
    const res: any = await delTaskByIds(reactiveData.tableIds);
    if (res.statusCode === 200) {
      getData();
      ElMessage({
        type: "success",
        message: "删除成功",
      });
    } else {
      ElMessage({
        type: "error",
        message: "删除失败",
      });
    }
  } else {
  }
};

const getData = async () => {
  const req = {
    objCondition: {
      createHumanName: "admin",
      name: name.value,
      statusName: statusName.value,
      taskUse: taskUse.value,
      taskTypeCode: "XCXJ",
      parent: null,
      isCircle: isCircle.value,
      startTimeCondPre: reactiveData.arrTime[0] ? reactiveData.arrTime[0] : "",
      endTimeCondPre: reactiveData.arrTime[1] ? reactiveData.arrTime[1] : "",
    },
    orderby: "statusName_desc,startTime_desc",
    pageIndex: pageIndex.value,
    pageSize: pageSize.value,
  };
  const res: any = await getUavTaskPageList(req);
  if (res.statusCode === 200) {
    reactiveData.tableData = res.data.dataSource;
    total.value = res.data.totalCount;
  } else {
    reactiveData.tableData = [];
    total.value = 0;
  }
};

const handlePlan = (id: string) => {
  router.push({
    path: "/home/task/taskPlan",
    query: {
      id,
      type: "XCXJ",
    },
  });
};

//选择
const handleSelectionChange = (selection: any) => {
  reactiveData.tableIds = [];
  selection.forEach((data: any) => {
    reactiveData.tableIds.push(data.id);
  });
};
//分页
const handleCurrentChange = (index: number) => {
  pageIndex.value = index;
  getData();
};

const formatterCircle = (row: any) => {
  return row.isCircle === 0 ? "否" : "是";
};

//获取任务用途的集合
getTaskUseList({ parent: "xcxj", type: "usetype" });
//初始化获取数据
getData();
//获取统计
getStatisticsData({ typeCode: "XCXJ", creater: "admin" });
</script>


<style lang="less" scoped>
@import url("../alltask.less");
</style>